<script setup lang="ts">
import useDragAndDrop from "@@/composables/useDragAndDrop"
import { ref } from "vue"
import { Position, Node, useVueFlow } from "@vue-flow/core"
import { useAppStore } from "@/pinia/stores/app"

const appStore = useAppStore()
const { screenToFlowCoordinate, removeNodes } = useVueFlow()
const { onDragStart, onDrop } = useDragAndDrop()

interface Props {
  id: string | undefined
}

const props = defineProps<Props>()

type ALOG_TYPE =
  | "TD3"
  | "SARSA"
  | "SAC"
  | "PPO_CNN"
  | "PPO"
  | "QMIX"
  | "MAPPO"
  | "HAPPO"
  | "PG"
  | "MADDPG"
  | "DUELINGQ"
  | "DQN"
  | "DPPO"
  | "DDQN"
  | "DDPG"
  | "AC"
const algos = ref<ALOG_TYPE[]>([
  "TD3",
  "SARSA",
  "SAC",
  "PPO_CNN",
  "PPO",
  "QMIX",
  "MAPPO",
  "HAPPO",
  "PG",
  "DUELINGQ",
  "DQN",
  "DDQN",
  "DDPG",
  "AC",
  "MADDPG",
  "DPPO"
])
const AlgoText = ref<{ [PropName: string]: number }>()
const gragStart = async (event: DragEvent, algo: ALOG_TYPE) => {
  const label: string = await getLabel(algo)
  const position = screenToFlowCoordinate({
    x: event.clientX,
    y: event.clientY
  })
  const newNode: Node = {
    id: label,
    type: "output",
    class: "light",
    position,
    data: { label: label, algo, value: label, multiple: true },
    targetPosition: Position.Left
  }
  onDragStart(event, "output", newNode)
}

const getLabel = (algo: ALOG_TYPE): Promise<string> => {
  return new Promise((resolve) => {
    let index = 1
    if (AlgoText.value == undefined || AlgoText.value[algo] == undefined) {
      AlgoText.value = { [algo]: index }
    } else {
      index = AlgoText.value[algo] + 1
      AlgoText.value[algo] = index
    }
    resolve(`${algo}_${index}`)
  })
}

const handleDeleteNodes = () => {
  removeNodes(props.id)
}
</script>

<template>
  <div class="inte-tip-pane" :class="sidebarStatus">
    <el-popover placement="top" :width="290" trigger="click" :popper-class="`inte-tip-pane-popper ${appStore.sidebar.opened ? 'open' : 'close'}`">
      <template #reference>
        <el-button class="tip-show-btn">添加节点</el-button>
      </template>
      <div class="node-content">
        <div class="node-pane">
          <span class="node-pane-title mb-3">算法</span>
          <div class="nodes">
            <div
              class="vue-flow__select-node-output"
              v-for="item in algos"
              :key="item"
              :draggable="true"
              :title="item"
              @dragstart="gragStart($event, item)"
              @drop="onDrop($event)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </el-popover>
    <el-button type="danger" :disabled="props.id == undefined" @click="handleDeleteNodes">删除节点</el-button>
  </div>
</template>
<style lang="scss" scoped>
@import "@@/assets/styles/mixins.scss";

.inte-tip-pane {
  position: absolute;
  z-index: 99;
  bottom: 20px;
  left: 20px;
}

.node-pane {
  display: flex;
  flex-direction: column;
}

.node-pane-title {
  margin-bottom: 10px;
}

.nodes > * {
  margin-bottom: 10px;
  cursor: grab;
}

.node-content {
  max-height: calc(40vh);
  overflow-y: auto;

  @extend %scrollbar;
}

.nodes {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
  z-index: 99;
}

.vue-flow__select-node-output {
  font-size: 14px;
  color: white;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #1d2a4d;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
